<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="asset/css/conmom.css" />
		<link rel="stylesheet" href="asset/css/search.css" />
	</head>
	<body>
		<div class="classify">
			<div class="search">
		    	<i class="iconfont back" onclick="window.history.go(-1)">&#xe624;</i>
		        <input type="text" placeholder="请输入关键字搜索" id="keyword">
		        <button class="searchBtn"><i class="icon iconfont">&#xe610;</i></button>
		    </div>
		    <div class="classify-div clearfix">
		    	<div class="search-left fl">
		    		<ul>
		    			<li class="active">风格</li>
		    			<li>材质</li>
		    			<li>空间</li>
		    			<li>形状</li>
		    			<li>吊灯</li>
		    			<li>吊灯</li>
		    		</ul>
		    	</div>
		    	<div class="search-right fr">
		    		<div class="search-right-div">
		    			<div class="ftit">
		    				<div class="grid_c1 ftit_inner">
		    					风格
		    				</div>
		    			</div>
		    			<div class="search-right-list show clearfix">
		    				<ul>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    				</ul>
		    			</div>
		    		</div>
		    		<div class="search-right-div">
		    			<div class="ftit">
		    				<div class="grid_c1 ftit_inner">
		    					材质
		    				</div>
		    			</div>
		    			<div class="search-right-list clearfix">
		    				<ul>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    				</ul>
		    			</div>
		    		</div>
		    		<div class="search-right-div">
		    			<div class="ftit">
		    				<div class="grid_c1 ftit_inner">
		    					形状
		    				</div>
		    			</div>
		    			<div class="search-right-list clearfix">
		    				<ul>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    				</ul>
		    			</div>
		    		</div>
		    		<div class="search-right-div">
		    			<div class="ftit">
		    				<div class="grid_c1 ftit_inner">
		    					形状
		    				</div>
		    			</div>
		    			<div class="search-right-list clearfix">
		    				<ul>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    				</ul>
		    			</div>
		    		</div>
		    		<div class="search-right-div">
		    			<div class="ftit">
		    				<div class="grid_c1 ftit_inner">
		    					形状
		    				</div>
		    			</div>
		    			<div class="search-right-list clearfix">
		    				<ul>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    				</ul>
		    			</div>
		    		</div>
		    		<div class="search-right-div">
		    			<div class="ftit">
		    				<div class="grid_c1 ftit_inner">
		    					形状
		    				</div>
		    			</div>
		    			<div class="search-right-list clearfix">
		    				<ul>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    					<li>
		    						<div>
										<img src="http://120.76.45.117:8080/findeng/style/xiandaijianyue.jpg">
									</div>
									<p class="click-name" data-id="210">
										现代简约
									</p>
		    					</li>
		    				</ul>
		    			</div>
		    		</div>
		    	</div>
		    </div>
		  <!--  <div class="search-footer">
				<div class="search-reset">重置</div>
				<div class="search-confirm">确定</div>
			</div>-->
		</div>
	</body>
	<script type="text/javascript" src="public/jquery.min.js" ></script>
	<script type="text/javascript" src="asset/font/iconfont.js" ></script>
	<script>
		$(".ftit").click(function(){
			$(this).next().addClass("show");
		});
		$(".search-left ul li").click(function(){
			$(this).addClass("active").siblings().removeClass("active");
			var index=$(this).index();
			$('.search-right .search-right-div').eq(index).find(".search-right-list").addClass("show").parent(".search-right-div").siblings().find(".search-right-list").removeClass("show");
		});
		$(".search-right-div .search-right-list>ul>li").click(function(){
			$(this).find("p").addClass("active");
		});
		$(".search-reset").click(function(){
			if($(".search-right-list>ul>li").find("p").hasClass("active")){
				$(".search-right-list>ul>li").find("p").removeClass('active');
			}
		});
		/**/
		var Height=$(window).height();
		$(".search-left").css("height",Height-($('.search').height()+$('.search-footer').height()));
		$(".search-right").css("height",Height-($('.search').height()+$('.search-footer').height()));
	</script>
</html>
